<template>
  <div class="info">

    <Head :title=title></Head>
    <div v-if="info.info">

      <!-- 轮播 -->
      <div class="my-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in info.gallery" :key="item.id"><img :src="item.img_url" alt="" class="banner" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 售后界面 -->
      <div class="serve">
        <div class="dot"></div>
        30天无忧退货
        <div class="dot"></div>
        48小时快速退款
        <div class="dot"></div>
        满88元免邮费
      </div>
      <!-- 选择规格 -->
      <div class="middle">
        <div class="text">
          <p class="infoname">
            {{ info.info.name }}
          </p>
          <p class="infogoods">
            {{ info.info.goods_brief }}
          </p>
          <p class="infoprice">￥{{ info.info.retail_price }}</p>
        </div>
        <div class="choice">
          <p>请选择规格数量<span>></span></p>
        </div>
      </div>
      <!-- 商品参数 -->
      <div class="goodstip">
        <div class="goodstext">
          <div class="goodstitle">商品参数</div>
          <div v-for="item in info.attribute" :key="item.id">
            <div class="goodsshow">
              <span>{{ item.name }}</span>
              <div class="border">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 渲染图 -->
      <div class="pic">
        <div v-html="info.info.goods_desc"></div>
      </div>
      <!-- 常见问题 -->
      <div class="often">
        <p class="oftentitle">常见问题</p>
        <ul>
          <li v-for="item in info.issue" :key="item.id">
            {{ item.question }}
            <p>{{ item.answer }}</p>
          </li>
        </ul>
      </div>
      <!-- 大家都在看 -->
      <div class="look">大家都在看</div>
      <div class="productList">
        <div v-for="item in info.productList" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <p class="title1">{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </div>
      </div>

      <!-- 底部固定页面 -->
      <div class="fixbox">
        <!-- 收藏 -->
        <van-icon name="star-o" size="30px" :color="info.collected ? 'red' : ''" @click="collected" />

        <van-icon name="cart-o" :badge="cartLength" size="30px" @click="goCart" />
        <div class="btn">
          <button @click="addCar" class="add">添加购物车</button>
          <button @click="buy" class="buy">立即购买</button>
        </div>
      </div>

      <!-- 添加购物车弹出框 -->
      <van-popup v-model:show="show" closeable position="bottom" style="height: 200px">
        <div class="popup">
          <img :src="info.info.list_pic_url" alt="" />
          <div>
            <p class="popupprice">价格:￥{{ info.info.retail_price }}</p>
            <p class="popupnumber">数量:{{ info.allnumber }}</p>
            <!-- <van-stepper v-model="value" step="1" /> -->
            <van-stepper v-model="num" min="1" :max=info.allnumber />
          </div>
        </div>
      </van-popup>
    </div>

  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import Head from '@/components/title.vue'
import { detailaction, addcollect, addCart, submitAction } from '@/api/category/list/info'
import { cartList } from '@/api/cart'
import { showToast } from 'vant'
const route = useRoute()
const router = useRouter()
const title = ref('产品详情')
const info = ref({})
const show = ref(false)
const cartLength = ref(0)
const num = ref(1)
// 获取购物车长度
cartList({
  openId: localStorage.getItem('openId')
}).then(res => {
  cartLength.value = res.data.length
})
// 添加购物车弹出层
const addCar = () => {
  if (show.value) {
    addCart({
      goodsId: route.query.id,
      number: num.value,
      openId: localStorage.getItem('openId')
    }).then((res) => {
      if (res.data === 'success') {
        showToast('添加成功')
        show.value = false
      }
    }, 1000)
  } else {
    show.value = true
  }
}
const buy = () => {
  if (show.value) {
    submitAction({
      goodsId: route.query.id,
      allPrise: num.value * info.value.retail_price,
      openId: localStorage.getItem('openId')
    }).then((res) => {
      router.push({ name: 'orderView' })
    }, 1000)
  } else {
    show.value = true
  }
}
const collected = () => {
  addcollect({
    goodsId: route.query.id,
    openId: localStorage.getItem('openId')
  }).then(() => {
    detailaction({
      id: route.query.id,
      openId: localStorage.getItem('openId')
    }).then(res => {
      // console.log(res)
      info.value = res
    })
  })
}
const goCart = () => {
  router.push({ name: 'cartView' })
}
detailaction({
  id: route.query.id,
  openId: localStorage.getItem('openId')
}).then(res => {
  console.log(res)
  info.value = res
})

</script>
<script>
export default {
  name: 'infoView'
}
</script>

<style lang="scss" scoped>
.info {
  background-color: #f8f8f8;

  .title {
    font-size: 36px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    margin: 9px 0px 21px 0px;
  }

  .my-swipe {
    width: 750px;

    .banner {
      width: 100%;
      height: 691px;
    }
  }

  .serve {
    background: #434343;
    width: 100%;
    height: 100px;
    //   text-align: center;
    line-height: 100px;
    display: flex;
    justify-content: space-around;
    font-size: 24px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 11px;
      border: 3px solid rgba(183, 166, 115, 1);
      margin-top: 42px;
    }
  }

  .middle {
    width: 710px;
    height: 324px;
    margin: 20px auto;
    background-color: #fff;

    .text {
      margin-left: 35px;

      .infoname {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin: 34px 0px 7px 0px;
      }

      .infogoods {
        font-size: 26px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
      }

      .infoprice {
        font-size: 34px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
        margin-top: 12px;
      }
    }

    .choice {
      width: 640px;
      height: 86px;
      border-top: 1px solid rgb(215, 214, 214);
      margin: 46px auto 0px;

      p {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0.82px;
        font-weight: 400;
        margin-top: 30px;
      }

      span {
        margin-left: 425px;
      }
    }
  }

  .goodstip {
    width: 710px;
    // height: 632px;
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 47px;

    .goodstext {
      margin-left: 34px;
      padding-top: 40px;

      .goodstitle {
        font-size: 38px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin-bottom: 34px;
      }

      .goodsshow {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;

        span {
          font-size: 26px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          margin-top: 41px;
        }

        .border {
          background: #f8f8f8;
          border: 1px solid rgba(223, 223, 223, 1);
          width: 509px;
          height: 68px;
          margin-right: 34px;
          text-align: center;
          line-height: 68px;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 10px;
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
    }
  }

  .pic {
    width: 750px;
    margin-top: 20px;

    ::v-deep img {
      width: 100%;
    }
  }

  .often {
    width: 710px;
    padding-bottom: 60px;
    // height: 800px;
    margin: 0 auto;
    background-color: #fff;

    .oftentitle {
      font-size: 38px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      text-align: center;
      margin-top: 46px;
    }

    ul {
      li {
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        margin: 0px 40px 40px 61px;

        p {
          font-size: 26px;
          color: #666666;
          letter-spacing: 0;
          font-weight: 400;
          margin-top: 15px;
        }
      }
    }
  }

  .look {
    font-size: 38px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    margin: "46px 0px 36px 0px";
  }

  .productList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #fff;
    margin-bottom: 130px;

    img {
      width: 350px;
      height: 350px;
    }

    .title1 {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      margin-left: 22px;
    }

    .price {
      font-size: 26px;
      color: #9e4242;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 22px;
    }
  }

  .fixbox {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 130px;
    background-color: #fff;
    z-index: 10000;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .btn {
      font-size: 26px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;

      .add {
        width: 190px;
        height: 72px;
        background: #cea62a;
        border-radius: 35.75px 0px 0px 35.75px;
        border: none;
      }

      .buy {
        width: 190px;
        height: 72px;
        background: #a04c19;
        border-radius: 0px 35.75px 35.75px 0px;
        border: none;
      }
    }
  }

  ::v-deep .van-popup--bottom {
    bottom: 130px;
  }

  .popup {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 73px;

    img {
      width: 196px;
      height: 196px;
    }

    .popupprice {
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }

    .popupnumber {
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      margin: 31px 0px 26px 0px;
    }
  }
}
</style>
